<!--
  Generated template for the GoodsinfoPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->

<div class="goods_info_bg">
  <div class="goods_info_box">
    <div class="cancel" (click)="cancel()"><img src="assets/icon/home_Announced record_close.png" alt="关闭"></div>
    <div class="goods_info flex flex_center_center flex_s_b">
      <div class="goods_info_img mr10 flex flex_center_center"><img src="{{goodInfo.cover}}" alt="cover"></div>
      <div class="goods_info_text flex flex_column flex_left_center ">
        <div class="title ft_line2 color51 ft22 line_height20 mb8">{{goodInfo.good_name}}{{goodInfo.introduce}}</div>
        <div class="price ft34  flex flex_center_center flex_left_center red_active ft_bold">
          <span class="bg_active_color  color255 ft18 mr10 price_hot ft_normal">抢购价</span>¥{{goodInfo.price}}
          <span class="color153 ft_mid_through ft24 ml20 ft_normal">¥{{goodInfo.old_price}}</span></div>
      </div>
    </div>
    <div class="bg_active_color next">
      <div class="lottery_next color255 ft24  flex flex_center_center flex_s_a">
        <div class="next_num ft_PF_Regular flex flex_center_center "><i class="point"></i> 距第<span>{{resData.now_issue}}</span>期开奖倒计时</div>
        <div class="next_time ft22"><span>{{countdown.minutes}}</span> 分<span>{{countdown.seconds}}</span>秒<span>{{countdown.Milliseconds}}</span></div>
      </div>
    </div>
    <div class="buyType m_t_b30 ft24 color51 flex  flex_center_center flex_s_b flex_left_center">
      <span class="color51 pont flex ft28"><i class="point bg_active_color"></i>单双玩法</span>
      <div [ngClass]="{'buy_active':buyTypeNum==1}" (click)="buyType(1)">买单</div>
      <div [ngClass]="{'buy_active':buyTypeNum==2}" (click)="buyType(2)">买双</div>
    </div>
    <div class="buyType m_t_b30 ft24 color51 flex flex_center_center flex_s_b flex_left_center">
      <span class="color51 pont flex ft28"><i class="point bg_active_color"></i>大小玩法</span>
      <div [ngClass]="{'buy_active':buyBigOrSmall==1}" (click)="buyType2(1)">买小</div>
      <div [ngClass]="{'buy_active':buyBigOrSmall==2}" (click)="buyType2(2)">买大</div>
    </div>
    <div class="m_t_b30 ">
      <div class="color51 pont flex"><i class="point bg_active_color" style="margin-bottom: 2px"></i>抢购数量</div>
    </div>
    <div class="buy_num">
      <span *ngFor="let item of buyNum,let i= index" (click)="buyNumF(i)" [ngClass]="{'buy_active':item.isPicked}">
        {{item.num}}
      </span>
      <span [ngClass]="{'buy_num_span':true,'buy_active':onInput}" *ngIf="showBuyNum_input">
        <ion-input type="number" text-center [(ngModel)]="buyNum_input" (ionChange)="buyNum_inputF()" placeholder="其他数量"
          (ionFocus)="onFocus()" (ionBlur)="onBlur()" class="color51" max='9999' min='1'>
        </ion-input>
      </span>
    </div>
    <!-- 账户余额 -->
    <div class="pay_box bg_gary flex  flex_center_center flex_s_b">
      <div class="pay_money ft24">账户余额：¥ <span class="red_active ft34 ft_bold">{{money}}</span></div>
      <div class="pay_money ft24">合计支付：¥ <span class="red_active2 ft34 ft_bold ">{{totalPrice}} <i *ngIf="buyBigOrSmall!==0 && buyTypeNum!==0"
            class='beishu'>×2</i>
        </span></div>
    </div>
    <!-- 本次抢购总价 -->
    <div class="pay_box bg_gary flex  flex_center_center flex_s_b bg_white">
      <div class="pay_btn ft28 bg_active_color color255" (click)="Recharge()">立即充值</div>
      <div class="pay_btn ft28 bg_active_color color255" (click)="dismiss()" [ngClass]="{'disabled_bg':nextOpenTime<=10,'bg_red':nextOpenTime>10}">立即购买</div>
    </div>
  </div>
</div>
